<template>
  <div class="login-container">
    <Card class="login-card">
      <div class="login-header">
        <img src="/police-badge.svg" alt="Police Badge" height="64" />
        <h1 class="login-title">全省中小学信息管理系统</h1>
      </div>

      <Form
        :model="formState"
        :rules="rules"
        layout="vertical"
        class="login-form"
      >
        <Form.Item name="userName">
          <Input
            v-model:value="formState.userName"
            placeholder="请输入用户名"
            size="large"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </Input>
        </Form.Item>

        <Form.Item name="password">
          <Input.Password
            v-model:value="formState.password"
            placeholder="请输入密码"
            size="large"
          >
            <template #prefix>
              <LockOutlined />
            </template>
          </Input.Password>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            :loading="loading"
            style="line-height: 38px; padding: 0"
            size="large"
            block
            @click="handleLogin"
            >登录系统</Button
          >
        </Form.Item>
      </Form>

      <div class="login-footer">公安部门专用系统 ©2025</div>
      <a class="download_a" href="/assets/Chrome.zip" target="_blank">下载谷歌浏览器</a>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { Form, Input, Button, Card, message } from "ant-design-vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import Api from "@/api/login.js";
const router = useRouter();
import { setHeaderToken } from "@/utils/axios.js";

// 表单数据
const formState = reactive({
  userName: "",
  password: "",
});

// 加载状态
const loading = ref(false);

// 表单规则
const rules = {
  userName: [{ required: true, message: "请输入用户名" }],
  password: [{ required: true, message: "请输入密码" }],
};

// 登录处理
const handleLogin = () => {
  loading.value = true;
  Api.login(formState).then((res: any) => {
    console.log(res);
    localStorage.setItem("token", res.token);
    localStorage.setItem("userId", res.id);
    localStorage.setItem("userName", res.userName);
    localStorage.setItem("dsCode", res.belongDsCode);
    setHeaderToken(res.token);
    localStorage.setItem("isLoggedIn", "true");
    message.success("登录成功");
    router.push("/schools");
    window.location.reload();
  }).catch((err: any) => {
    console.error(err);
    loading.value = false;
  });
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to right, #1890ff, #40a9ff);
  padding: 20px;
}

.login-card {
  width: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 24px;
  position: relative;
}
.download_a {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.login-title {
  margin-top: 16px;
  color: var(--primary-color);
  font-size: 22px;
  text-align: center;
  font-weight: 600;
}

.login-form {
  margin-top: 24px;
}

.login-footer {
  margin-top: 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* 去除表单历史选择项默认背景色 */
#app input:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #333 !important;
}
</style>
